1 00:00:00,660 --> 00:00:03,140 Hello and welcome to this lecture. 2 00:00:03,330 --> 00:00:12,070 In this lecture we are going to be creating this structure for our app using hates CML. 3 00:00:13,010 --> 00:00:20,300 I am inside my text said it up so I'm just going to expand the directory and click on the history email 4 00:00:20,310 --> 00:00:20,880 far. 5 00:00:21,120 --> 00:00:30,840 So this is where I will create the hastier e-mail code for how our app to create the structure so the 6 00:00:30,840 --> 00:00:40,410 way I'm going to structure this lecture is to add a chunk of code at a time and then explain the code 7 00:00:40,500 --> 00:00:41,840 to you. 8 00:00:42,780 --> 00:00:46,270 Okay I have add a chunk of code. 9 00:00:46,470 --> 00:00:52,790 So from line 1 to 13 These are the basic tags. 10 00:00:52,800 --> 00:01:01,640 You will see on any website or web application they or will have a doctype. 11 00:01:01,890 --> 00:01:12,510 The hasty mail tag the head tag title and the body attack the online one the dog type basically is to 12 00:01:12,540 --> 00:01:22,110 instruct or notify the web browsers or waivers can access this application to tell them that this document 13 00:01:22,110 --> 00:01:25,960 you are about to view is in hastier mail document. 14 00:01:26,200 --> 00:01:28,700 So is for instructional purposes. 15 00:01:28,950 --> 00:01:38,100 The actual age of the email code is from line to to line 13 as you can notice the tags have been indented 16 00:01:38,520 --> 00:01:41,880 so that you can see the parent and child relationship. 17 00:01:41,890 --> 00:01:48,390 Clearly you can see that the head and the body are children of the hastier male element. 18 00:01:48,630 --> 00:02:00,030 While the title is the child of the head element or tags are paid from line to line 13. 19 00:02:00,150 --> 00:02:06,780 So we've got the plane which is the head we which is the here team are there and they got a closing 20 00:02:06,910 --> 00:02:07,450 statement. 21 00:02:07,470 --> 00:02:14,070 You can tell the distinction between the opening and closing tag because the closing tag has laid forward 22 00:02:14,070 --> 00:02:22,070 slas before the name of the tank so you can see the dotted lines under there and dotted lines on the 23 00:02:22,100 --> 00:02:22,470 there. 24 00:02:22,500 --> 00:02:28,440 It means that the tags match fact do the same with the head in see the dotted line means there match 25 00:02:28,840 --> 00:02:32,450 and then the body you can see they are match. 26 00:02:33,510 --> 00:02:37,280 I have added some more chunk of good. 27 00:02:37,470 --> 00:02:42,090 Line for 2 line 9. 28 00:02:42,280 --> 00:02:43,960 The could have just added on. 29 00:02:44,160 --> 00:02:52,260 So the metal tank mother type is Glee are used to provide information so most of the stuff in the head 30 00:02:52,260 --> 00:03:03,300 section provide its frame information about the document at all so all you can add access to that external 31 00:03:03,300 --> 00:03:09,890 document like this stylesheet on line 8 and these script on line 9. 32 00:03:10,110 --> 00:03:20,610 Okay so the metal cast sets cast said basically this attribute here is a rebbe's and value every attribute 33 00:03:20,610 --> 00:03:26,620 must have a value which is enclosed in quotes so the quotes there is utf. 34 00:03:26,610 --> 00:03:28,330 Dash it what it may. 35 00:03:28,350 --> 00:03:29,460 They met a car set. 36 00:03:29,520 --> 00:03:39,660 Is the encoding type that this document supports most term utf that it is the standard encoding type 37 00:03:39,980 --> 00:03:50,280 that most documents support there is a lot of the characters can be read the medder tank on line fighting 38 00:03:50,520 --> 00:03:56,130 with the attribute of name value of description. 39 00:03:56,130 --> 00:04:05,370 Also provide a description for the page content attribute is percentage later. 40 00:04:05,550 --> 00:04:14,240 So all this information will help this search engines to serve up the request that if you are types 41 00:04:14,240 --> 00:04:19,640 into the search into yes so for example if someone's looking for a tip calculator these information 42 00:04:19,640 --> 00:04:24,610 are provided here in the headset that will guide them to this page. 43 00:04:24,910 --> 00:04:35,450 Line six men a name here in the viewport you basically enables you to view enables the application to 44 00:04:35,550 --> 00:04:44,180 the web page to be accessed and viewed correctly by any screen size regardless if it's a cell phone. 45 00:04:44,190 --> 00:04:50,690 Were there lives a screen or tablet with a large screen or a 20 each monitor. 46 00:04:50,940 --> 00:04:57,240 Regardless of the screen size it will automatically resize to fit that screen size. 47 00:04:57,240 --> 00:04:59,870 That's what this line 6 is saying. 48 00:05:00,500 --> 00:05:08,410 The initial dash skill is initial zaun that is set so he labels you to zoom in and zoom out of the device 49 00:05:09,190 --> 00:05:12,530 and serve on the title line. 50 00:05:12,600 --> 00:05:15,610 Is there a link to the external star she will be using. 51 00:05:15,670 --> 00:05:23,920 Should this does show off here we are going to be using a jack us group library to create the functionality 52 00:05:23,920 --> 00:05:27,610 for the app and that is called Jake Query. 53 00:05:27,610 --> 00:05:29,410 We haven't got it installed. 54 00:05:29,580 --> 00:05:33,020 We have a link to the library. 55 00:05:33,210 --> 00:05:34,010 Google. 56 00:05:34,030 --> 00:05:38,450 This is from Google so it's called a CDC link. 57 00:05:38,470 --> 00:05:41,580 See the stands for content delivery network. 58 00:05:41,710 --> 00:05:49,060 Sometime some of these content delivery networks like Google Microsoft and others they can host a lot 59 00:05:49,060 --> 00:05:51,690 of these libraries for us. 60 00:05:51,690 --> 00:05:57,670 The advantage of doing that is that they are current and they can be updated without you doing anything 61 00:05:58,060 --> 00:06:05,010 or you need to do is add a link to that library which is what I have done in line 9. 62 00:06:06,540 --> 00:06:17,390 I have added some one chunk of code from line 15 all the way to line twenty four. 63 00:06:17,700 --> 00:06:20,040 So let me explain the code for you. 64 00:06:20,160 --> 00:06:25,210 Line 14 here basically is the head tag which is a hate tag. 65 00:06:25,290 --> 00:06:33,230 I'll use that to define the title the title of was called tip calculator and add it is span element 66 00:06:33,510 --> 00:06:36,530 span enables you to join to text together. 67 00:06:36,660 --> 00:06:38,630 So the Pierce one. 68 00:06:38,790 --> 00:06:48,720 Given this man and idea of percent P L C and also give him the date at the hedin or detect that will 69 00:06:48,720 --> 00:06:52,950 show what ahead then will be a tic calculator or key. 70 00:06:53,150 --> 00:06:57,920 I'm going to enclose the actual calculator inside a form. 71 00:06:58,140 --> 00:06:59,750 So this is a tankful of form. 72 00:06:59,760 --> 00:07:07,590 I've given the form an A D attribute with the value of calculator every attribute must have its value 73 00:07:07,680 --> 00:07:09,860 in quotes. 74 00:07:09,990 --> 00:07:18,900 These are also important because you can use the idea to style the element would see assess on line 75 00:07:19,170 --> 00:07:31,530 16 tasks a paragraph tack an inside an input as well got a paragraph an entire paragraph and got an 76 00:07:31,650 --> 00:07:35,620 input tag with an idea of amount. 77 00:07:35,910 --> 00:07:40,560 So this would be an input where something will be tapped in anything called the input means you have 78 00:07:40,560 --> 00:07:46,980 to type something in line 17 and another paragraph and then next paragraph. 79 00:07:46,980 --> 00:07:50,290 Got an input chord percentage. 80 00:07:50,460 --> 00:07:59,530 So again this is something that you have to typing on line 19 in notice on line 18 here. 81 00:07:59,700 --> 00:08:02,120 Got a comment. 82 00:08:02,160 --> 00:08:04,640 This is how you write a comment it here. 83 00:08:04,650 --> 00:08:12,180 Mail left angle brackets exclamation dash dash and then that any time there's a comment will not be 84 00:08:12,180 --> 00:08:14,860 displayed by the web browser or comments that are useful. 85 00:08:14,880 --> 00:08:20,740 You can use them to troubleshoot and see what works and what doesn't work so I don't need this Nigers 86 00:08:20,790 --> 00:08:22,110 get rid of that. 87 00:08:22,350 --> 00:08:28,650 And then on lying to me bring up a bit on line. 88 00:08:28,700 --> 00:08:38,850 A team called paragraph tag as well with some techs and another input tag and have caught the attributes 89 00:08:39,630 --> 00:08:46,460 for the tag and I've also got this attribute called Disabled with the value disabled. 90 00:08:46,530 --> 00:08:47,460 What that means. 91 00:08:47,460 --> 00:08:55,730 The disabled attribute is like a boolean attribute bullying means true or false when it is used. 92 00:08:55,800 --> 00:09:00,170 It is specifies that the input elements should be disabled. 93 00:09:00,180 --> 00:09:08,930 What that means is that no one use that cannot type anything inside this input box. 94 00:09:08,980 --> 00:09:14,400 The reason for that is that I dont like the way the application will work. 95 00:09:14,400 --> 00:09:22,680 They will type paying the bill amount the type of the percentage and then will he will calculate before 96 00:09:22,710 --> 00:09:29,060 the input before this tip and total value are displayed. 97 00:09:29,220 --> 00:09:32,840 So the calculator will control how these are displayed. 98 00:09:32,970 --> 00:09:34,640 So these are disable them. 99 00:09:34,680 --> 00:09:44,250 The users will not be able to enter or click on this case so the values will be populated by the caplet 100 00:09:44,880 --> 00:09:45,770 option. 101 00:09:47,240 --> 00:09:53,790 Line 20 got to know their input tag with an idea add up. 102 00:09:53,790 --> 00:10:04,760 It says submit button so this is the button we use to perform the calculation on line twenty three is 103 00:10:05,060 --> 00:10:07,030 the script. 104 00:10:07,270 --> 00:10:09,520 This is a link to this script. 105 00:10:09,530 --> 00:10:16,490 If I was going to use my own personal script and not the jacquier library this is where I will add it 106 00:10:16,960 --> 00:10:27,610 so but for this projet be using the query library I'll be using the jaquie library bod. 107 00:10:27,650 --> 00:10:33,500 I actually write in this script for the query inside my script file. 108 00:10:33,530 --> 00:10:38,510 Even though I'm referencing this script I'm going to be writing it will be a query which is a javascript 109 00:10:38,510 --> 00:10:48,450 library but it will be accessed in the library from Google even do specifying the script inside a Jav 110 00:10:48,450 --> 00:10:49,450 a script file. 111 00:10:49,760 --> 00:10:56,870 So that's set for this lecture on the structure of the application. 112 00:10:56,870 --> 00:11:04,230 So if I saved the document open on the application you can see what it looks like. 113 00:11:04,280 --> 00:11:11,150 I just double click and call index it can see what their application looks like at the moment so this 114 00:11:11,150 --> 00:11:16,610 is what the application looks like at the moment we've just created this structure using hastier mail 115 00:11:17,080 --> 00:11:21,370 like flexural will be applying stylin to make it look prettier. 116 00:11:21,410 --> 00:11:22,670 Thanks for watching. 117 00:11:22,970 --> 00:11:23,250 It.